<template>
  <div>
    <h1>Trade Info</h1>
    <pre>{{ tradeInfo }}</pre>
    
    <h1>User Positions</h1>
    <pre>{{ userPositions }}</pre>
    
    <button @click="startTickerUpdateHandler">Start Ticker Update</button>
    <button @click="stopTickerUpdate">Stop Ticker Update</button>
    <button @click="startQueryUserPositionsHandler">Start Query User Positions</button>
    <button @click="stopQueryUserPositions">Stop Query User Positions</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useWebSocket } from '../plugin/useWebSocket';

// WebSocket URL
const baseUrl = 'http://localhost:8100/';

// 使用 useWebSocket 函数
const { tradeInfo, userPositions, startTickerUpdate, stopTickerUpdate, queryUserPositions, stopQueryUserPositions, disconnectSocket } = useWebSocket(baseUrl);

// 从 localStorage 获取用户信息
const gateKey = ref('');
const gateSecret = ref('');

const init = () => {
  const info = JSON.parse(localStorage.getItem('user'));
  if (info && info.user && info.user.UserInfo) {
    gateKey.value = info.user.UserInfo.gate_key;
    gateSecret.value = info.user.UserInfo.gate_secret;
  }
};

// 启动行情更新
const startTickerUpdateHandler = () => {
  startTickerUpdate(gateKey.value, gateSecret.value, 'usdt', 'BTC_USDT');
};

// 启动用户持仓查询
const startQueryUserPositionsHandler = () => {
  queryUserPositions(gateKey.value, gateSecret.value, 'usdt', true, 100, 0);
};

// 组件挂载时初始化
onMounted(() => {
  init();
});

// 组件卸载时断开 WebSocket 连接
onUnmounted(() => {
  disconnectSocket();
});
</script>
